<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <title>我的订单</title>
  <style>
    body {
      margin: 0;
      font-family: 'Helvetica Neue', sans-serif;
      background-color: #fff;
      color: #333;
    }

    .header {
      background-color: #34db50;
      color: white;
      text-align: center;
      padding: 1rem;
      font-size: 1.5rem;
    }

    .order-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
      padding: 2rem;
      list-style: none;
    }

    .order-card {
      border: 1px solid #eee;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      background-color: #fff;
      transition: transform 0.2s ease;
      padding: 1rem;
    }

    .order-card:hover {
      transform: translateY(-5px);
    }

    .order-img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 6px;
      margin-bottom: 1rem;
    }

    .order-info {
      text-align: center;
    }

    .order-dish-name {
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      color: #222;
    }

    .order-price {
      color: #e74c3c;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .order-time,
    .order-status {
      font-size: 0.9rem;
      color: #666;
      margin: 0.3rem 0;
    }

    .status-pending {
      color: #f39c12; /* 待支付 */
    }

    .status-paid {
      color: #27ae60; /* 已支付 */
    }

    .status-cancelled {
      color: #e74c3c; /* 已取消 */
    }
  </style>
</head>
<body>
<header class="header">
  <h1>我的订单</h1>
</header>
<div id="app">
  <ul class="order-container">
    <li v-for="(order, index) in sortedOrders" :key="index" class="order-card">
      <img :src="order.dishImg || 'images/default.jpg'" alt="菜品图片" class="order-img"/>
      <div class="order-info">
        <div class="order-dish-name">{{ order.dishName }}</div>
        <div class="order-price">订单价格: ¥{{ order.orderPrice }}</div>
        <div class="order-time">下单时间: {{ formatDateTime(order.orderCreateTime) }}</div>
        <div class="order-status" :class="getStatusClass(order.status)">
          状态: {{ formatStatus(order.status) }}
        </div>
      </div>
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      orders: []
    },
    computed: {
      sortedOrders() {
        return this.orders.slice().sort((a, b) => {
          return new Date(b.orderCreateTime) - new Date(a.orderCreateTime);
        });
      }
    },
    methods: {
      getOrdersByUser(custId) {
        const url = '/kfc/myorder/user/' + custId;
        axios.get(url)
                .then(res => {
                  this.orders = res.data.data || [];
                })
                .catch(error => {
                  console.error("获取订单列表失败：", error);
                });
      },
      formatDateTime(dateTimeStr) {
        if (!dateTimeStr) return "";
        const date = new Date(dateTimeStr);
        return date.toLocaleString();
      },
      formatStatus(status) {
        switch (status) {
          case "0": return "待支付";
          case "1": return "已支付";
          case "2": return "已取消";
          default: return "未知状态";
        }
      },
      getStatusClass(status) {
        switch (status) {
          case "0": return "status-pending";
          case "1": return "status-paid";
          case "2": return "status-cancelled";
          default: return "";
        }
      }
    },
    mounted() {
      const urlParams = new URLSearchParams(window.location.search);
      const custId = urlParams.get("custId");
      this.getOrdersByUser(custId);
    }

  });

</script>
</body>
</html>
